import React from 'react';
import { Menu, Icon } from 'antd';
import './index.less';
import { inject, observer } from 'mobx-react';
import types from './types';
import { WeaLocaleProvider } from 'ecCom';
import { displayTypes } from '../../../constants/app';

const getLabel = WeaLocaleProvider.getLabel;

const {
  RULE,
  RELATION,
  CLERK,
  SOURCE,
  REPLY,
  TASKSETTING,
  OTHERSETTING,
  APIACTION,
  MODETRIGGER,
  REPEATVALIDATION,
  
  JOINCUBE, 
  MODEINTERFACE, 
  MODECHECK
} = types;
@inject('edcSettingDesignerStore', 'edcFormDesignerStore')
@observer
export default class SettingDesigner extends React.Component {
    constructor(props) {
        super();
        const { params } = props;
        const { appid } = params;

        this.store = props.edcSettingDesignerStore;
        this.store.init(appid);
        window.fromEDC = 1;
        window.edcAppid = appid;
    }

    componentWillUnmount() {
        window.fromEDC = 0;
        window.edcAppid = '';
    }

    menuClick = ({ item, key, keyPath, domEvent }) => {
        const { changeType } = this.store;

        changeType(key);
    }

    renderContent() {
        const { type, appid, changeType } = this.store;
        const { app } = this.store.parent();
        const { modeId, pageExpandId } = this.props.edcFormDesignerStore;
        const ComponentView = require(`./${type}/index`).default;

        return (
          <ComponentView ecId={`${this && this.props && this.props.ecId || ''}_ComponentView@jn6uly`} appid={appid} app={app} changeType={changeType} pageExpandId={pageExpandId} modeId={modeId} linkType={'relation'} />
        );
    }

    render() {
        const { type, displayType } = this.store;

        return (
            <div className="es-main">
                <div className="es-left">
                    {displayType === displayTypes.FORM ?
                        <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@r10fc8`} selectedKeys={type} onClick={this.menuClick}>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@wonhi6`} key={RULE} ><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@vakznd`} type="edc-rule" />{getLabel('503913', '规则')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@wzqm5t`} key={RELATION}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@w011ip`} type="link" />{getLabel('510979', '关联建模模块')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@mf5t9n`} key={CLERK}><i className="icon-coms-text" style={{ marginRight: '8px' }} />{getLabel('513085', '提示文案')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@d1gxyr`} key={SOURCE}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@d5wvk3`} type="search" />{getLabel('515972', '跟踪数据来源')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@g7rx12`} key={REPLY}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@kvw6db`} type="message" />{getLabel('389532', '填写回执')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@yyj5sw`} key={OTHERSETTING}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@54anmz`} type="setting" />{getLabel('20824', '其他设置')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@pdn0l5`} key={APIACTION}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@uihdj6`} type="edc-interface" />{getLabel('20978', '接口动作')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@ad08wr`} key={MODETRIGGER}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@to9dtv`} type="edc-trigger" />{getLabel('30056', '数据审批')}</Menu.Item>
                        </Menu> :
                        <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@8v6pao`} selectedKeys={type} onClick={this.menuClick}>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@i35pi6`} key={TASKSETTING} ><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@sv7u58`} type="edc-rule" />{getLabel('522668', '任务设置')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@8b2o95`} key={JOINCUBE} ><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@x0xnci`} type="link" />{getLabel('510979', '关联建模模块')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@j1otu7`} key={MODEINTERFACE}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@goeo0b`} type="edc-interface" />{getLabel('20978', '接口动作')}</Menu.Item>
                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@i853z2`} key={MODECHECK}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@d4foa7`} type="edc-trigger" />{getLabel('30056', '数据审批')}</Menu.Item>
                        </Menu>
                    }

                </div>
                <div className="es-right">
                    {this.renderContent()}
                </div>
            </div>
        );
    }
}
